<template>
  <ul>
    <li v-for="(item, index) in list" :key="index" class="itemBox">
      <p class="itemTitle">{{ item.title }}</p>
      <router-link
        tag="div"
        :to="{
          name: 'singer',
          query: { type: itemTwo.type, area: itemTwo.area, name: itemTwo.name },
        }"
        v-for="(itemTwo, index) in item.options"
        :key="index"
        class="twoItem"
        :class="
          $route.query.type == itemTwo.type &&
          $route.query.area == itemTwo.area &&
          'twoItemTe'
        "
      >
        {{ itemTwo.name }}
      </router-link>
    </li>
  </ul>
</template>

<script>
import { singerClassify } from "@/api";
export default {
  data() {
    return {
      list: [
        {
          title: "推荐",
          options: [
            { name: "全部", area: "-1", type: "-1" },
            { name: "男歌手", area: "-1", type: "1" },
            { name: "女歌手", area: "-1", type: "2" },
            { name: "乐队", area: "-1", type: "3" },
          ],
        },
        {
          title: "华语",
          options: [
            { name: "华语", area: "-7", type: "-1" },
            { name: "华语男歌手", area: "7", type: "1" },
            { name: "华语女歌手", area: "7", type: "2" },
            { name: "华语乐队", area: "7", type: "3" },
          ],
        },
        {
          title: "欧美",
          options: [
            { name: "欧美", area: "96", type: "-1" },
            { name: "欧美男歌手", area: "96", type: "1" },
            { name: "欧美女歌手", area: "96", type: "2" },
            { name: "欧美乐队", area: "96", type: "3" },
          ],
        },
        {
          title: "日本",
          options: [
            { name: "日本", area: "8", type: "-1" },
            { name: "日本男歌手", area: "8", type: "1" },
            { name: "日本女歌手", area: "8", type: "2" },
            { name: "日本乐队", area: "8", type: "3" },
          ],
        },
        {
          title: "韩国",
          options: [
            { name: "韩国", area: "16", type: "-1" },
            { name: "韩国男歌手", area: "16", type: "1" },
            { name: "韩国女歌手", area: "16", type: "2" },
            { name: "韩国乐队", area: "16", type: "3" },
          ],
        },
        {
          title: "其他",
          options: [
            { name: "其他", area: "0", type: "-1" },
            { name: "其他男歌手", area: "0", type: "1" },
            { name: "其他女歌手", area: "0", type: "2" },
            { name: "其他乐队", area: "0", type: "3" },
          ],
        },
      ],
    };
  },
  mounted() {
    this.$router.push({
      name: "singer",
      query: { type: -1, area: -1, name: "全部", time: Date.parse(new Date()) },
    });
  },
};
</script>

<style lang="scss" scoped>
.itemBox {
  margin: 5px 0 0;
  padding-top: 16px;
  border-top: 1px solid #d3d3d3;
  .itemTitle {
    height: 25px;
    padding-left: 14px;
    font-size: 16px;
    font-family: "Microsoft Yahei";
    font-weight: 700;
  }
  .twoItem {
    margin-bottom: 2px;
    width: 133px;
    height: 29px;
    line-height: 29px;
    padding-left: 27px;
    color: #333;
    background: url("./../../assets/imges/singerBtn.png") no-repeat 0 -30px;
    &.twoItemTe {
      color: #c20c0c;
      background-position: 0 0;
    }
  }
  &:nth-child(1) {
    border-top: none;
    margin-top: 51px;
    padding-top: 0;
  }
}
</style>